<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>修改密码</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/form.css">
</head>

<body>
  <div class="header container">
    修改密码
    <p style="display: block;">
      <a href="./index.html">回到首页</a>
    </p>
  </div>
  <form class="layui-form" lay-filter="rpwdForm">
    <span class="error">修改密码错误！</span>
    <label>
      原始密码： <input type="text" name="oldpassword" lay-verify="required" class="oldpassword">
    </label>
    <label>
      新密码： <input type="text" name="newpassword" lay-verify="required" class="newpassword">
    </label>
    <label>
      确认新密码： <input type="text" name="rnewpassword" lay-verify="required" class="rnewpassword">
    </label>
    <button lay-submit lay-filter="rpwd">确认修改</button>
  </form>
  <script type="module">
    import '../lib/layui/layui.js'
    import '../lib/axios.js'

    layui.use(['form'], function () {
      var form = layui.form;
      var $ = layui.$;
      var layer = layui.layer;

      // 表单验证
      form.verify({
        required: function (value, item) {
          if (!value) {
            return '该项为必填项';
          }
        }
      });

      form.on('submit(rpwd)', function (data) {
        var oldpassword = data.field.oldpassword;
        var newpassword = data.field.newpassword;
        var rnewpassword = data.field.rnewpassword;

        axios.post(`http://localhost:9000/users/rpwd`, {
          id:layui.data('shop').id,
          oldPassword: oldpassword,
          newPassword: newpassword,
          rNewPassword: rnewpassword
      },{
        headers:{
          'authorization':layui.data('shop').token
        }
      })
        .then(function (response) {
          if (response.data.code === 1) {
            layer.msg(response.data.message, { icon: 1 });
            layui.data('shop', null)
            location.href = './login.html'
          } else {
            layer.msg(response.data.message, { icon: 0 })
          }
        })

      return false; // 阻止表单默认提交
    });
    });
  </script>
</body>

</html>